<template>
  <div style="padding-bottom: 10px">
    <el-line style="margin-bottom: 10px" title="工作中事项进展"></el-line>
    <el-form
      :model="initData.form"
      ref="queryForm"
      v-show="initData.showSearch"
      :label-width="initData.labelwidth"
    >
      <div>
        <el-row>
          <el-col :span="22">
            <el-form-item label="事项名称" prop="matterName">
              <el-select
                filterable
                @change="matterNameChange"
                v-model="initData.form.matterName"
              >
                <el-option
                  v-for="matter in initData.matterList"
                  :key="matter.matterId"
                  :value="matter.matterId"
                  :label="matter.matterName"
                />
              </el-select>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row>
          <el-col :span="22">
            <el-form-item label="事项内容" prop="matterContent">
              <el-input disabled type="textarea" v-model="initData.form.matterContent" />
            </el-form-item>
          </el-col>
        </el-row>
        <!-- <el-row>
          <el-col :span="22">
            <el-form-item label="工作任务">
              <el-select
                disabled
                :disabled="initData.form.relatedIndicatorOrTaskType == ''"
                v-model="initData.form.relatedIndicatorOrTaskId"
              >
                <el-option
                  v-for="task in initData.relatedTasks"
                  :key="task.targetTaskId"
                  :label="task.targetTaskName"
                  :value="task.targetTaskId"
                />
              </el-select>
            </el-form-item>
          </el-col>
        </el-row> -->
        <el-row>
          <el-col :span="10">
            <el-form-item label="事项负责人">
              <el-input
                disabled
                v-model="initData.form.matterResponsibleName"
                maxlength="30"
              />
            </el-form-item>
          </el-col>
          <el-col :offset="2" :span="10">
            <el-form-item label="完成期限">
              <el-date-picker
                style="width: 100%;"
                disabled
                v-model="initData.form.completionDeadline"
                type="date"
                format="YYYY/MM/DD"
              />
            </el-form-item>
          </el-col>
        </el-row>

        <el-row>
          <el-col :span="10">
            <el-form-item label="事项关联人">
              <el-input disabled v-model="initData.form.em2" />
            </el-form-item>
          </el-col>
          <el-col :offset="2" :span="10">
            <el-form-item label="关联法律">
              <el-select disabled v-model="initData.form.relatedLawId">
                <el-option
                  v-for="dict in dicts.related_law"
                  :key="dict.value"
                  :value="Number(dict.value)"
                  :label="dict.label"
                />
              </el-select>
            </el-form-item>
          </el-col>
        </el-row>

        <el-row>
          <el-col :span="10">
            <el-form-item label="归属部门" prop="deptId">
              <el-input disabled v-model="initData.form.dept" />
            </el-form-item>
          </el-col>
          <el-col :offset="2" :span="10">
            <el-form-item label="关联制度">
              <el-select disabled v-model="initData.form.relatedPolicyId">
                <el-option
                  v-for="policy in initData.relatedPolicies"
                  :key="policy.value"
                  :label="policy.label"
                  :value="Number(policy.value)"
                />
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :span="10">
            <!-- <el-form-item label="相关类型">
              <el-select
                disabled
                v-model="initData.form.relatedIndicatorOrTaskType"
                placeholder="请选择"
              >
                <el-option
                  v-for="task in initData.relatedTasksType"
                  :key="task.value"
                  :label="task.label"
                  :value="String(task.value)"
                />
              </el-select>
            </el-form-item> -->
          </el-col>
        </el-row>

        <el-row>
          <el-col :span="10">
            <el-form-item label="关键节点类型">
              <el-radio-group disabled v-model="initData.form.workContentType">
                <el-radio label="0">市场类</el-radio>
                <el-radio label="1">非市场类</el-radio>
                <!-- 添加其他单选按钮选项 -->
              </el-radio-group>
            </el-form-item>
          </el-col>
          <el-col :offset="2" :span="10">
            <el-form-item label="是否成立专班">
              <el-radio-group
                disabled
                v-model="initData.form.isSpecialTeamFormed"
              >
                <el-radio label="0">是</el-radio>
                <el-radio label="1">否</el-radio>
              </el-radio-group>
            </el-form-item>
          </el-col>
        </el-row>
      </div>
    </el-form>
    <el-divider
      style="
        margin: 15px 0;
        border-top: 3px var(--el-border-color) var(--el-border-style);
      "
    ></el-divider>
    <!--工作内容（非市场类）-->
    <div>
      <el-row>
        <el-col :span="10">
          <ElLine
            :title="'关键节点（市场类）'"
            v-if="initData.form.workContentType == '0'"
          />
          <ElLine
            :title="'关键节点（非市场类）'"
            v-else-if="initData.form.workContentType == '1'"
          />
          <ElLine
            :title="'关键节点'"
            v-else
          />
        </el-col>
      </el-row>
      <!--      <div style="margin-top: 10px;" v-show="initData.matterId">-->
      <!--        <el-button type="primary" @click="addWorkConten()">新增</el-button>-->
      <!--      </div>-->
      <div style="margin-top: 10px" v-if="initData.form.workContentType == '0'">
        <el-row>
          <el-col :span="23">
            <el-table
              border
              :data="initData.form.workContentList"
              :row-class-name="tableRowClassName"
            >
              <el-table-column type="index" label="序号" width="55" />
              <el-table-column label="项目名称">
                <template #default="scope">
                  <el-input
                    disabled
                    class="no-border-input"
                    v-model="scope.row.em2"
                    type="textarea"
                    :rows="1"
                  />
                </template>
              </el-table-column>

              <el-table-column label="项目金额">
                <template #default="scope">
                  <el-input
                    disabled
                    class="no-border-input"
                    v-model="scope.row.em3"
                    type="number"
                    :rows="1"
                  />
                </template>
              </el-table-column>

              <el-table-column label="项目阶段">
                <template #default="scope">
                  <el-input
                    disabled
                    class="no-border-input"
                    v-model="scope.row.em4"
                    type="textarea"
                    :rows="1"
                  />
                </template>
              </el-table-column>

              <el-table-column label="计划签单时间">
                <template #default="scope">
                  <el-date-picker
                    style="width: 100%;"
                    disabled
                    v-model="scope.row.signingTime"
                    type="date"
                    format="YYYY/MM/DD"
                  />
                </template>
              </el-table-column>

              <el-table-column label="计划回款时间">
                <template #default="scope">
                  <el-date-picker
                    disabled
                    v-model="scope.row.paymentCollectionTime"
                    type="date"
                    format="YYYY/MM/DD"
                  />
                </template>
              </el-table-column>
              <el-table-column label="关键节点">
                <template #default="scope">
                  <el-input
                    disabled
                    class="no-border-input"
                    v-model="scope.row.workContentDescription"
                    type="textarea"
                    :rows="1"
                  />
                </template>
              </el-table-column>
              <el-table-column label="节点目标">
                <template #default="scope">
                  <el-input
                    disabled
                    v-model="scope.row.workGoal"
                    type="textarea"
                    :rows="1"
                  />
                </template>
              </el-table-column>
              <el-table-column label="计划完成时间">
                <template #default="scope">
                  <el-date-picker
                    disabled
                    v-model="scope.row.plannedCompletionTime"
                    type="date"
                    format="YYYY/MM/DD"
                  />
                </template>
              </el-table-column>
              <!--              <el-table-column label="操作" align="center" class-name="small-padding fixed-width">-->
              <!--                <template #default="scope">-->
              <!--                  <el-button icon="Refresh" link type="primary" @click="clearWorkConten(scope.row.index)">清空</el-button>-->
              <!--                  <el-button icon="Delete" link type="primary" @click="delWorkConten(scope.row.index,1)">删除</el-button>-->
              <!--                </template>-->
              <!--              </el-table-column>-->
            </el-table>
          </el-col>
        </el-row>
      </div>
      <div style="margin-top: 10px" v-if="initData.form.workContentType == '1'">
        <el-row>
          <el-col :span="23">
            <el-table
              border
              :data="initData.form.workContentList"
              style="width: 100%"
              :row-class-name="tableRowClassName"
            >
              <el-table-column type="index" label="序号" width="55" />
              <el-table-column label="关键节点">
                <template #default="scope">
                  <el-input
                    disabled
                    class="no-border-input"
                    v-model="scope.row.workContentDescription"
                    type="textarea"
                    :rows="1"
                  />
                </template>
              </el-table-column>
              <el-table-column label="节点目标">
                <template #default="scope">
                  <el-input
                    disabled
                    v-model="scope.row.workGoal"
                    type="textarea"
                    :rows="1"
                  />
                </template>
              </el-table-column>
              <el-table-column label="计划完成时间">
                <template #default="scope">
                  <el-date-picker
                   style="width: 100%;"
                    disabled
                    v-model="scope.row.plannedCompletionTime"
                    type="date"
                    format="YYYY/MM/DD"
                  />
                </template>
              </el-table-column>
              <!--              <el-table-column label="操作" align="center" class-name="small-padding fixed-width">-->
              <!--                <template #default="scope">-->
              <!--                  <el-button icon="Refresh" link type="primary" @click="clearWorkConten(scope.row.index)">清空</el-button>-->
              <!--                  <el-button icon="Delete" link type="primary" @click="delWorkConten(scope.row.index,1)">删除</el-button>-->
              <!--                </template>-->
              <!--              </el-table-column>-->
            </el-table>
          </el-col>
        </el-row>
      </div>
    </div>
    <!--协同需求-->
    <el-divider
      style="
        margin: 15px 0;
        border-top: 3px var(--el-border-color) var(--el-border-style);
      "
    ></el-divider>
    <div>
      <el-row>
        <el-col :span="10">
          <ElLine :title="'协同需求'" />
        </el-col>
      </el-row>
      <!--      <div style="margin-top: 10px;">-->
      <!--        <el-button type="primary" @click="addWorkCollaboration()">新增</el-button>-->
      <!--      </div>-->
      <div style="margin-top: 10px">
        <el-row>
          <el-col :span="23">
            <el-table
              border
              :data="initData.form.workCollaborationList"
              style="width: 100%"
              :row-class-name="tableRowClassName"
            >
              <el-table-column type="index" label="序号" width="100" />
              <el-table-column label="协同需求">
                <template #default="scope">
                  <el-input
                    disabled
                    class="no-border-input"
                    v-model="scope.row.collaborationNeed"
                    type="textarea"
                    :rows="1"
                  />
                </template>
              </el-table-column>
              <el-table-column label="协同目标">
                <template #default="scope">
                  <el-input
                    disabled
                    v-model="scope.row.collaborationGoal"
                    type="textarea"
                    :rows="1"
                  />
                </template>
              </el-table-column>

              <el-table-column label="协同人">
                <template #default="scope">
                  <el-select disabled v-model="scope.row.collaboratorsId">
                    <el-option
                      v-for="policy in initData.user"
                      :key="policy.value"
                      :label="policy.label"
                      :value="policy.value"
                    />
                  </el-select>
                </template>
              </el-table-column>
              <el-table-column label="计划完成时间">
                <template #default="scope">
                  <el-date-picker
                    style="width: 100%"
                    disabled
                    v-model="scope.row.plannedCompletionTime"
                    type="date"
                    format="YYYY/MM/DD"
                  />
                </template>
              </el-table-column>
              <!--              <el-table-column label="操作" align="center" class-name="small-padding fixed-width">-->
              <!--                <template #default="scope">-->
              <!--                  <el-button icon="Refresh" link type="primary" @click="clearWorkCollaboration(scope.row.index)">清空</el-button>-->
              <!--                  <el-button icon="Delete" link type="primary" @click="delWorkCollaboration(scope.row.index,1)">删除</el-button>-->
              <!--                </template>-->
              <!--              </el-table-column>-->
            </el-table>
          </el-col>
        </el-row>
      </div>
    </div>
    <el-divider
      style="
        margin: 15px 0;
        border-top: 3px var(--el-border-color) var(--el-border-style);
      "
    ></el-divider>

    <!-- 落实情况   -->
    <el-line style="margin-bottom: 10px" title="落实情况"></el-line>
    <div style="margin-top: 10px">
      <el-button type="primary" @click="addUpdateTableData()">新增</el-button>
    </div>
    <el-table
      :data="initData.workMatterPracticableList"
      :row-class-name="tableRowClassName"
      style="width: 100%"
    >
      <el-table-column type="index" label="序号" width="50"></el-table-column>
      <el-table-column property="date" label="关键节点（含协同要求）">
        <template #default="scope">
          <el-select v-model="initData.workMatterPracticableList[scope.row.index].workPrtKeyNode">
            <el-option
                v-for="item in initData.contentAndCollNameList"
                :key="item"
                :label="item"
                :value="item"
            />
          </el-select>
        </template>
      </el-table-column>
      <el-table-column property="name" label="完成期限">
        <template #default="scope">
          <el-date-picker
            v-model="initData.form.completionDeadline"
            type="date"
            disabled
            placeholder="请选择"
            format="YYYY/MM/DD"
          />
        </template>
      </el-table-column>
      <el-table-column property="address" label="是否完成">
        <template #default="scope">
          <el-select
            v-model="
              initData.workMatterPracticableList[scope.row.index].workPrtIsComlt
            "
            style="width: 240px"
          >
            <el-option value="0" label="否"></el-option>
            <el-option value="1" label="是"></el-option>
          </el-select>
        </template>
      </el-table-column>
      <el-table-column property="address" label="实际完成时间">
        <template #default="scope">
          <el-date-picker
            v-model="
              initData.workMatterPracticableList[scope.row.index]
                .workPrtRealComltTime
            "
            type="date"
            format="YYYY/MM/DD"
            :default-value="new Date()"
          />
        </template>
      </el-table-column>
      <el-table-column property="address" label="情况说明">
        <template #default="scope">
          <el-input
            type="textarea"
            placeholder="请输入"
            v-model="
              initData.workMatterPracticableList[scope.row.index].workPrtDesc
            "
          ></el-input>
        </template>
      </el-table-column>
      <el-table-column
        label="操作"
        align="center"
        class-name="small-padding fixed-width"
      >
        <template #default="scope">
          <el-button
            icon="Refresh"
            link
            type="primary"
            @click="clearUpdateTable(scope.row.index)"
            >清空</el-button
          >
          <el-button
            icon="Delete"
            link
            type="primary"
            @click="delUpdateTable(scope.row.index, 1)"
            >删除</el-button
          >
        </template>
      </el-table-column>
    </el-table>
    <el-divider
      style="
        margin: 15px 0;
        border-top: 3px var(--el-border-color) var(--el-border-style);
      "
    ></el-divider>
<!--    <el-line style="margin-bottom: 10px" title="工作报告"></el-line>-->
<!--    <work-report-->
<!--      :getMatterM="getMatterM"-->
<!--      :parentData="initData.form"-->
<!--    ></work-report>-->
    <div style="text-align: center; margin-top: 30px">
      <el-button
        type="success"
        @click="saveWorkImplementationM"
        style="width: 80px"
        >保存</el-button
      >
    </div>
  </div>
</template>

<script setup>
import {
  dataScopeMatterList,
  getMatterList,
  getMatter,
  saveWorkImplementation,
  getRelatedIndicatorOrTask,
  getSystemManage,
} from "../../../api/matter/matter.js";
import WorkReport from "../matter/workReport.vue";
import { reactive,defineProps } from "vue";
import { getUsers } from "@/api/matter/users.js";
import {getTargetTaskList} from "../../../api/targetTask/targetTask.js";
const { proxy } = getCurrentInstance();
const { related_law } = proxy.useDict("related_law");
const dicts = reactive({
  related_law: related_law,
});
let props = defineProps({
  rowData:Object,
  activeTab:String
})
const initData = reactive({
  relatedTasksType: [
    { value: "0", label: "指标" },
    { value: "1", label: "任务" },
  ],
  relatedTasks: [],
  relatedPolicies: [],
  user: [], // 存储用户选项
  labelwidth: 120,
  // 遮罩层
  loading: false,
  // 选中数组
  ids: [],
  // 非单个禁用
  single: true,
  // 非多个禁用
  multiple: true,
  // 显示搜索条件
  showSearch: true,
  // 总条数
  total: 0,
  // 【请填写功能名称】表格数据
  matterList: [],
  // 弹出层标题
  title: "",
  // 是否显示弹出层
  open: false,
  // 查询参数
  queryParams: {
    pageNum: 1,
    pageSize: 10,
    keyWord: null,
    em1: null,
    em2: null,
    em3: null,
    em4: null,
    em5: null,
  },
  options1: [
    { value: "", label: "全部" },
    { value: "important", label: "重要工作" },
    { value: "nonImportant", label: "非重要工作" },
  ],
  options2: [
    { value: "", label: "全部" },
    { value: "important", label: "超期" },
    { value: "nonImportant", label: "未超期" },
  ],

  // 表单参数
  form: {},
  workContentForm: [], // 事项内容
  workMatterPracticableList: [], // 落实情况
  workCollaborationList: [], // 协同需求
  contentAndCollNameList:[], // 关键节点、协同需求 名称列表
  matterType: 0,
  matterId: null,
});
// function fetchRelatedTasks() {
//   if (!initData.form.relatedIndicatorOrTaskType) {
//     return;
//   }
//   getRelatedIndicatorOrTask({
//     type: initData.form.relatedIndicatorOrTaskType,
//   }).then((response) => {
//     if (response.code === 200) {
//       initData.relatedTasks = response.data;
//     }
//   });
// }

function getRelatedTasks() {
  getRelatedIndicatorOrTask({
    type: initData.form.relatedIndicatorOrTaskType,
  }).then((response) => {
    if (response.code === 200) {
      initData.relatedTasks = response.data;
    }
  });
}
//关联制度
function getRelatedPolicies() {
  getSystemManage().then((response) => {
    if (response.code === 200) {
      initData.relatedPolicies = response.data;
    } else {
      proxy.$modal.msgError(result.msg);
    }
  });
}
function getUsersM() {
  getUsers().then((response) => {
    if (response.code === 200) {
      initData.user = response.data;
    }
  });
}

function saveWorkImplementationM() {
  if (initData.matterId == null) {
    proxy.$modal.msgWarning("请选择事项");
    return;
  }
  if (initData.workMatterPracticableList.length == 0) {
    proxy.$modal.msgWarning("请添加落实情况");
    return;
  }
  let data = {
    workMatterPracticableList: initData.workMatterPracticableList,
    matterId: initData.matterId,
    plannedCompletionTime: initData.workContentForm.plannedCompletionTime,
    workPrtPlanComltTime:initData.form.completionDeadline,
    // 'workCollaborationList':initData.form.workCollaborationList,
    // 'workContentList':initData.form.workContentList
  };
  saveWorkImplementation(data).then((res) => {
    if (res.code == 200) {
      proxy.$modal.msgSuccess("保存成功");
    }
    console.log(res);
  });
}

function addUpdateTableData() {
  initData.workMatterPracticableList.push({
    workPrtRealComltTime: new Date(),
  });
}

function addWorkCollaboration() {
  initData.form.workCollaborationList.push({});
}

function clearWorkCollaboration(index) {
  initData.form.workCollaborationList[index] = {};
}
function delWorkCollaboration(index) {
  initData.form.workCollaborationList.splice(index, 1);
}
function addWorkConten() {
  initData.form.workContentList.push({});
}

function clearWorkConten(index) {
  console.log(initData.form.workContentList[index]);
  initData.form.workContentList[index] = {};
}
function delWorkConten(index) {
  initData.form.workContentList.splice(index, 1);
}
function clearUpdateTable(index) {
  initData.workMatterPracticableList[index] = {
    workPrtRealComltTime: new Date(),
  };
}

function delUpdateTable(index) {
  initData.workMatterPracticableList.splice(index, 1);
}

function matterNameChange(matterId) {
  initData.matterId = matterId;
  initData.form.matterId = matterId;
  if (matterId) {
    getMatterM(matterId);
  }
}

function tableRowClassName({ row, rowIndex }) {
  row.index = rowIndex;
}

function getMatterM(matterId) {
  return new Promise((resolve, reject) => {
    getMatter(matterId).then((res) => {
      if (res.code == 200) {
        initData.form = res.data;
        if (res.data.workContentType) {
          initData.matterType = res.data.workContentType;
        }
        initData.workContentForm = res.data.workContentList;
        initData.workCollaborationList = res.data.workCollaborationList;
        initData.contentAndCollNameList = res.data.contentAndCollNameList;
        initData.workMatterPracticableList = res.data.workMatterPracticableList;
        if (initData.workMatterPracticableList.length == 0) {
          console.log(
            "workMatterPracticableList",
            initData.workMatterPracticableList
          );
          initData.workMatterPracticableList[0] = {
            workPrtRealComltTime: new Date(),
          };
        }
        // fetchRelatedTasks();
        resolve(res);
      }
    });
  });
}

function getMatterListM() {
  dataScopeMatterList({pageNum: 1, pageSize: 100}).then((res) => {
    if (res.code == 200) {
      initData.matterList = res.rows;
      console.log(initData.matterList);
    }
  });
}

function getTargetTaskListM(){
  getTargetTaskList().then(res => {
    if (res.code == 200) {
      initData.relatedTasks = res.data;
    }
  })
}

watch(() => props.activeTab, (newParams, oldParams) => {
  // console.log('proxy.$route.query',proxy.$route.query);
  console.log(props.rowData);
  console.log('newParams ', newParams);
  console.log('oldParams ', oldParams);
  if (newParams=='taskImplementation') {
    if (props.rowData && props.rowData.matterId) {
      matterNameChange(props.rowData.matterId);
    }
  }
  else {
    if (props.rowData) {
      props.rowData.matterId = null;// 事项id置为 null
      clearForm();// 清空表单数据
    }
  }
})
function clearForm(){
  initData.matterId = null;
  initData.form = {};
  initData.matterType = 0;
  initData.workContentForm = [];
  initData.workCollaborationList = [];
  initData.workMatterPracticableList = [];
  if (initData.workMatterPracticableList.length == 0) {
    console.log(
        "workMatterPracticableList",
        initData.workMatterPracticableList
    );
    initData.workMatterPracticableList[0] = {
      workPrtRealComltTime: new Date(),
    };
  }
}

function created() {
  if (props.rowData && props.rowData.matterId) {
    matterNameChange(props.rowData.matterId);
  }
  getTargetTaskListM();
  getUsersM();
  getRelatedPolicies();
  getMatterListM();
  if (initData.workMatterPracticableList.length == 0) {
    console.log(
      "workMatterPracticableList",
      initData.workMatterPracticableList
    );
    initData.workMatterPracticableList[0] = {
      workPrtRealComltTime: new Date(),
    };
  }
}
created();
</script>
<style>
.width100 {
  width: 100%;
}
</style>
